<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item
        v-for="(item, index) in breadList"
        :key="index"
        :to="{ path: item.path }"
        >{{ item.name }}</el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- <router-link to="/table"></router-link> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadList: [
        {
          name: "home",
          path: "/home",
        },
      ],
    };
  },
  // 监听属性
  watch: {
    // 监听路由
    $route(val) {
      // 调用获取路由数组方法
      this.getBreadList(val);
    },
  },
  methods: {
    getBreadList(val) {
      // 过滤路由matched对象
      if (val.matched) {
        // console.log(val);
        let matched = val.matched;
        this.breadList = [];
        for (let index = 0; index < matched.length; index++) {
          this.breadList.push({
            name: matched[index].name,
            path: matched[index].path,
          });
        }
        // console.log(this.breadList);
        // 拿到过滤好的路由v-for遍历出来
        // this.breadList = matched;
      }
    },
  },
};
</script>

<style>
.el-breadcrumb {
  margin-bottom: 10px;
  padding: 10px;
  background-color: white;
}
</style>